<template>
  <view class="publish-container" :class="{ 'show': isVisible }">
    <!-- 半透明背景遮罩 -->
    <view class="mask" @click="hidePublishOptions"></view>
    
    <!-- 发布选项菜单 -->
    <view class="publish-options">
      <view class="options-title">发布内容</view>
      
      <view class="options-wrapper">
        <view class="option-item" @click="navigateTo('/package-discovery/pages/AI-travel')">
            <view class="option-icon publish-moment">智游</view>
        </view>
        <view class="option-item" @click="navigateTo('/package-discovery/pages/Customize-travel')">
          <view class="option-icon publish-moment">自定义攻略</view>
        </view>
        <view class="option-item" @click="navigateTo('/package-discovery/pages/public-travel')">
          <view class="option-icon publish-travel">发布游记</view>
        </view>
      </view>
      
      <view class="cancel-btn" @click="hidePublishOptions">取消</view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';

// 控制发布菜单的显示状态
const isVisible = ref(false);

// 显示发布选项
const showPublishOptions = () => {
  console.log('显示发布选项');
  isVisible.value = true;
};

// 隐藏发布选项
const hidePublishOptions = () => {
  console.log('隐藏发布选项');
  isVisible.value = false;
};

// 跳转到指定页面
const navigateTo = (url) => {
  console.log('导航到:', url);
  
  // 先进行页面跳转
  uni.navigateTo({
    url: url,
    success: () => {
      // 跳转成功后再隐藏发布选项
      setTimeout(() => {
        hidePublishOptions();
      }, 100);
    },
    fail: (err) => {
      console.error('页面跳转失败:', err);
      uni.showToast({
        title: '页面开发中，敬请期待',
        icon: 'none'
      });
      // 跳转失败也需要隐藏发布选项
      hidePublishOptions();
    }
  });
};

// 添加页面显示事件监听
onShow(() => {
  console.log('页面显示');
  showPublishOptions();
});

// 监听页面加载
onMounted(() => {
  console.log('页面加载');
  showPublishOptions();
  
  // 监听返回按钮事件
  uni.$on('page-back', () => {
    hidePublishOptions();
  });
});

// 监听页面销毁
onUnmounted(() => {
  console.log('页面销毁');
  // 移除事件监听
  uni.$off('page-back');
});
</script>

<style lang="scss" scoped>
.publish-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  visibility: hidden;
  
  &.show {
    visibility: visible;
    
    .mask {
      opacity: 0.7;
    }
    
    .publish-options {
      transform: translateY(0);
    }
  }
  
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .publish-options {
    position: relative;
    background-color: #fff;
    border-radius: 16px 16px 0 0;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    
    .options-title {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 30px;
    }
    
    .options-wrapper {
      display: flex;
      justify-content: space-around;
      margin-bottom: 30px;
      
      .option-item {
        text-align: center;
        
        .option-icon {
          display: inline-block;
          padding: 15px 20px;
          background-color: #f0f0f0;
          border-radius: 10px;
          font-size: 16px;
          color: #333;
          margin-bottom: 10px;
          
          &.publish-moment {
            background-color: #ffeaea;
            color: #ff6b6b;
          }
          
          &.publish-travel {
            background-color: #e3f2fd;
            color: #2196f3;
          }
        }
      }
    }
    
    .cancel-btn {
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: #f5f5f5;
      border-radius: 10px;
      font-size: 16px;
    }
  }
}
</style> 